<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-08 17:02:29
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\form\uiDate\uiTableDate.vue
 * CIMC-V2
-->
<template>
  <div class="w-full">
    <el-date-picker
      :ref="moduleId"
      v-model="formDataItem[formDataKey]"
      clearable
      :disabled="disabled"
      :disabled-date="
        info.extension?.nowDateLimit?.value
          ? disabledDate
          : () => {
              return false
            }
      "
      :placeholder="info.extension.placeholder.value"
      popper-class="wms-picker-panel"
      :shortcuts="shortcuts.dateShortcuts"
      size="mini"
      :type="modelSelection"
      :value-format="valueFormat"
    />
  </div>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  import { defineComponent } from 'vue'
  import { tableFormItemMixin } from '@ve/mixin'
  import { componentId } from '@/utils/unique'
  export default defineComponent({
    name: 'UiTableDate',
    mixins: [tableFormItemMixin],
    data() {
      return {
        modelData: {},
        shortcuts: {
          dateShortcuts: [
            {
              text: this.translateTitle('Ve.elements.当前'),
              value: () => {
                return new Date()
              },
            },
            {
              text: this.translateTitle('Ve.elements.昨天'),
              value: () => {
                const start = new Date()
                return start.getTime() - 3600 * 1000 * 24
              },
            },
            {
              text: this.translateTitle('Ve.elements.前天'),
              value: () => {
                const start = new Date()
                return start.getTime() - 3600 * 1000 * 24 * 2
              },
            },
            {
              text: this.translateTitle('Ve.elements.一周前'),
              value: () => {
                const start = new Date()
                return start.getTime() - 3600 * 1000 * 24 * 7
              },
            },
            {
              text: this.translateTitle('Ve.elements.一月前'),
              value: () => {
                const start = new Date()
                return start.getTime() - 3600 * 1000 * 24 * 30
              },
            },
            {
              text: this.translateTitle('Ve.elements.半年前'),
              value: () => {
                const start = new Date()
                return start.getTime() - 3600 * 1000 * 24 * 182
              },
            },
            {
              text: this.translateTitle('Ve.elements.一年前'),
              value: () => {
                const start = new Date()
                return start.getTime() - 3600 * 1000 * 24 * 365
              },
            },
          ],
        },
        valueFormat: '',
        disabledDate: () => {
          return false
        },
      }
    },
    computed: {
      modelSelection() {
        return this.info.extension.selection.value
      },
    },
    watch: {
      modelSelection() {
        this.formDataItem[this.formDataKey] = ''
      },
    },
    created() {
      // 生成组件ID
      this.moduleId = `uiTableInput_${componentId(6)}`
      // 设置时间限定函数
      if (this.info.extension?.nowDateLimit?.value) {
        const dateLimit = this.info.extension.nowDateLimit.value
        if (dateLimit === 'befor') {
          // 设置只能选择当前时之前
          this.disabledDate = this.disabledDateByBefor
        } else if (dateLimit === 'after') {
          // 设置只能选择当前时之后
          this.disabledDate = this.disabledDateByAfter
          // 重置快捷选择栏
          this.shortcuts = { dateShortcuts: [], dateRangeShortcuts: [] }
        }
      }
      // 生成值格式
      if (this.modelSelection.indexOf('month') > -1) {
        this.valueFormat = 'YYYY-MM'
      } else {
        this.valueFormat = this.modelSelection.indexOf('time') !== -1 ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'
      }
    },
    mounted() {},
    methods: {
      translateTitle,
      disabledDateByBefor(dateObj) {
        const nowDate = Date.now()
        const dateObjUnix = dateObj.getTime()
        return nowDate < dateObjUnix
      },
      disabledDateByAfter(dateObj) {
        const nowDate = Date.now()
        const dateObjUnix = dateObj.getTime()
        return nowDate - 86400000 > dateObjUnix
      },
    },
  })
</script>
<style lang="scss" scoped>
  :deep() .el-input--prefix .el-input__inner {
    padding-left: 30px;
  }
</style>
